<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header class="header">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="img-logo">
                <img src="./assets/logo.jpg" alt="" />
              </div>
            </el-col>
            <el-col :span="14">
              <nav>
                <el-menu
                  :default-active="activeIndex"
                  class="el-menu-demo"
                  mode="horizontal"
                  router="true"
                  @select="handleSelect"
                >
                  <el-menu-item index="/">首页</el-menu-item>
                  <el-menu-item index="/dindan">门票</el-menu-item>

                  <el-menu-item index="/jindian">景点</el-menu-item>
                  <el-menu-item index="/shisu">食宿</el-menu-item>
                  <el-menu-item index="/map">地图</el-menu-item>
                  <el-menu-item index="/my">用户</el-menu-item>

                </el-menu>
              </nav>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="backLogin">退出登录</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main class="main">
          <router-view />
        </el-main>
        <el-footer class="footer">
          <div class="box">
            <div class="boxV2">关于更多</div>
            <div class="boxV2">联系我们</div>
          </div>
          <div>
            青城山版权所有，未经授权，禁止复制转载。ICP证号： 粤ICP备20xxxxxx2335号
          </div>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="js">
import {  ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()

const activeIndex = ref('1')
const backLogin = () => {
  router.push('/login')

}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
}
* {
  margin: 0px;
  padding: 0px;
}

.header {
  /* background-color: #0261c0; */
  padding: 0 100px;
  height: 80px;
  line-height: 80px;
  .img-logo {
    height: 80px;
    width: 80px;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.main {
  /* background-color: #937e05; */
  min-height: 1200px;
}
.footer {
  background-color: #2a2a2a;
  height: 250px;
  padding-top: 100px;
  text-align: center;
  color: #dedede;
  .box {
    width: 100%;
    justify-content: center;
    display: flex;
    margin-bottom: 20px;
    .boxV2 {
      margin-left: 5px;
    }
  }
}
.tittle_all {
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  padding: 20px 0px;
}

/deep/.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}
/deep/.el-menu-item {
  font-size: 18px !important;
}
</style>
